<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>在线充值</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="__STATIC_URL__/static/mobile/css/weui.css"/>
    <link rel="stylesheet" href="__STATIC_URL__/static/mobile/css/index.css"/>
    <script src="__STATIC_URL__/static/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="__STATIC_URL__/static/css/pay.css?id=9"/>
    <script type="text/javascript" src="__STATIC_URL__/static/js/keyboard.js?v=3"></script>
    <style>
        .p_border {
            border: solid 1px red !important;
        }
        #cz li{
            height: 40px;
        }
        #cz p{
            line-height: 20px;
        }
        ol,ol li{
            list-style-type: upper-roman!important;
            list-style-position:inside;
        }
        #czshow{
            padding:10px 15px;
            color: red;
            text-align: left;
            background:#fff;
            margin-top:0 ;
            display: none;
            margin-bottom:20px;
            font-size: 14px
        }
    </style>
</head>
<body>
<div class="container" id="container">
    <div class="chongzhitop relative">
        <div>
            <dl>
                <dt>
                    <img src="__STATIC_URL__/static/mobile/images/jifen.png"/>
                </dt>
                <dd>
                    ￥{$info['balance']}
                </dd>
            </dl>
        </div>
        <div class="sm">
            <p>查看余额详情与充值说明</p>
            <img src="__STATIC_URL__/static/mobile/images/jiantou.png" alt=""/>
        </div>
    </div>
    <div class="bgfff chakan" style="display: none;">
        <p class="chu">储值账户&nbsp;:&nbsp;<span class="yue">{$info['balance']}</span></p>
    </div>
    <div class="jine">
        <form action="" method="post">
            <ul class="clearfix pd15" id="cz" style="padding-bottom: 0;">
                {volist name="czgive" id="vo"}
                    <li class="cz" data-czid="{$vo.id}" data-zscardid="{:getgivecard($vo.zs_card_id,0)}" data-zs_money="{$vo.zs_money}" data-id="{$vo.cz_money}">{$vo.cz_money}元</li>
                {/volist}
                <li class="qita cz p_border">其他金额</li>
            </ul>
            <div style="display: block;" id="qita">
                <input type="text" name="price" id="price" placeholder="充值金额(元)"/>

                <input type="hidden" name="giveid" id="giveid" value="">
                <input type="hidden" name="mid" id="mid" value="{$user.mid}">
                <input type="hidden" name="user_id" id="user_id" value="{$user.user_id}">
                <input type="hidden" name="orderid" id="orderid" value="">
                <input type="hidden" name="cardid" id="cardid" value="{$info.id}">
            </div>
            <ol class="weui-cells__title" type="1"  id="czshow">

            </ol>
            <a href="javascript:;" class="weui-btn weui-btn_warn">充值</a>
        </form>
    </div>
    <a href="{:url('cardmarke/cardshareali',array('mid'=>$info['mid']))}" class="weui-grid">分享</a>
</div>
</body>
<script type="text/javascript">
    $(function () {
        var a = "true";
        $(".sm").click(function () {
            if ($(".chakan").css("display") == "none") {
                $(".chakan").css("display", "block");
            } else {
                $(".chakan").css("display", "none");
            }

        });
        $(".cz").click(function () {
            var id = $(this).attr("data-czid");
            var czid = $(this).attr("data-czid");
            var price = $(this).attr('data-id');
            $("#cz li").removeClass('p_border');
            $("#giveid").val(czid);
            $(this).addClass('p_border');
            $('#price').val(price);
            $("#qita").hide();
            a = "true";
            //赋值显示
            var zscardid = $(this).attr('data-zscardid');
            var zsprice = $(this).attr('data-zs_price');
            $("#czshow li").remove();
            if(czid){
                $("#czshow").append("<li>" + "充:"+ price + "元" + "   送:" + zsprice + "元</li><li>" + zscardid + "</li>");
                $("#czshow").css("display","block");
            }

        })
        $(".qita").click(function () {
            if (a == "true") {
                $("#qita").show();
                $("#czshow").css("display","none");
                a = "false";
            } else {
                $("#qita").hide();
                a = "true";
            }

        });
        function getorder(mid) {
            var id = mid;
            $.ajax({
                type: "POST",
                url: "{:url('Carduserali/getorder2')}",
                cache: false,
                async: false,
                data: {
                    id: id,
                },
                success: function (data) {
                    $('#orderid').val(data);
                }
            });
        }
        function ready(callback) {
            if (window.AlipayJSBridge) {
                callback && callback();
            } else {
                document.addEventListener('AlipayJSBridgeReady', callback, false);
            }
        }
        function tradePay(tradeNO) {

            ready(function(){

                // 通过传入交易号唤起快捷调用方式(注意tradeNO大小写严格)
                AlipayJSBridge.call("tradePay", {
                    tradeNO: tradeNO

                }, function (data) {
                    if (9000 == data.resultCode) {

                        paysuccess();
                    }
                });
            });
        }
        function paysuccess() {
            var ordid = $('#orderid').val();
            $.ajax({
                type: "POST",
                url: "/alipay/payover/id/{$info['mid']}/orderid/" + ordid,

                cache: false,
                dataType: "json",
                async: false,
                data: {},

                success: function (data) {
                    if (data === 0) {

                        window.location.replace("/alipay/orderinfo/id/{$info['mid']}/orderid/" + ordid);
                    } else {

                        alert('支付失败');
                    }
                }
            });
        }
        $(".weui-btn_warn").click(function () {
            var price = $('#price').val();
            var mid = $('#mid').val();
            var zs_money = $('#zs_money').val();
            getorder(mid);
            var user_id = $('#user_id').val();
            var orderid = $('#orderid').val();
            var cardid = $('#cardid').val();
            var giveid = $('#giveid').val();
            $.ajax({
                url: "{:url('Carduserali/alipaypay')}",
                type: 'post',
                dataType: 'json',
                data: {
                    zs_money:zs_money,
                    price: price,
                    mid: mid,
                    user_id: user_id,
                    orderid: orderid,
                    cardid: cardid,
                    giveid: giveid
                },
                success: function (res) {
                    alert(res);
                    if (res === 1) {
                        alert('网络超时请重新支付');
                        getorder();
                        $(".weui-btn_warn").removeClass("submita");
                        $(".weui-btn_warn").addClass("submit");
                        $('.weui-btn_warn').attr('onclick', 'zf()');
                        $('.weui-btn_warn').val('重新支付');
                    }else{
                        tradePay(res);
                    }

                }
            })
        })
    })
</script>
<script>
    (function () {
        var input1 = document.getElementById('price');


        new KeyBoard(input1);

        input1.onclick = function () {
            new KeyBoard(input1);
        };
    })();

</script>
</html>